import React from 'react';
import { connect } from 'react-redux'
import menuRoute from "routes/menuRoute";
import {Button, Card, Divider, message, Timeline} from 'antd';
const { Meta } = Card;
import helpCn from "images/help-center-user/update-log/help-document-cn.png";
import helpEn from "images/help-center-user/update-log/help-document-en.png";
import helpJa from "images/help-center-user/update-log/help-document-ja.png";
import guideCn from "images/help-center-user/update-log/user-guide-cn.png";
import guideEn from "images/help-center-user/update-log/user-guide-en.png";
import guideJa from "images/help-center-user/update-log/user-guide-ja.png";
import questionCn from "images/help-center-user/update-log/common-question-cn.png";
import questionEn from "images/help-center-user/update-log/common-question-en.png";
import questionJa from "images/help-center-user/update-log/common-question-ja.png";
import custom from "images/help-center-user/update-log/custom-service.png";
import telephone from "images/help-center-user/update-log/telephone.png"
import email from "images/help-center-user/update-log/email.png"
import bg from "images/help-center-user/update-log/background.png"
import "styles/help-center-user/help-and-feedback-index.scss"
import updateLogService from 'containers/help-center-user/update-log/update-log.service';
import moment from "moment";
import mainService from 'containers/main.service'
import {messages} from "share/common";
import courseCn from "images/help-center-user/course/course-zh_cn.png";
import courseTw from "images/help-center-user/course/course-zh_tw.png";
import courseEn from "images/help-center-user/course/course-en.png";
import courseJa from "images/help-center-user/course/course-ja.png";
import DashboardService from "containers/dashboard/dashboard.service";

class HelpAndFeedbackIndex extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logs: [],
      onlineServiceUrl: null,
      updateLog: menuRoute.getRouteItem('update-log','key').url,
      FinancialCourse: menuRoute.getRouteItem('financial-course','key').url,
      shouldShowCourse: "",
    }
  }

  componentWillMount(){
    this.getUpdateLogList();
    this.onlineService();
    //this.showCourse();
  }

  getUpdateLogList = () => {
    updateLogService.getUpdateLogList().then(res => {
      this.setState({
        logs: res.data,
      })
    }).catch(err => {

    })
  };

  showCourse = () => {
    DashboardService.showCourse()
      .then(res => {
        this.setState({
          shouldShowCourse: res.data.result,
        })
      })
      .catch(err => {

      })
  };

  goPage = (e, item) => {
    item.path && this.context.router.push(menuRoute.getRouteItem(item.path, 'key').url)
  };

  goUpdateLog = () => {
    this.context.router.push(this.state.updateLog);
  };


//从main.js拷贝过来的，在线客服的跳转链接todo 下个迭代需要改这里，我封装了mainService.udeskSignature
  onlineService = () => {
    //后端需要手机或者邮箱签名，不然就报错
      mainService.udeskSignature(this.props.user, "2")
        .then((res) => {
          //在线客服
          // window.location.href = url;
          // window.open(url);//safari 不支持window.open,需要偏好设置
          this.setState({
            onlineServiceUrl: res.data._url
          })
        })
  };

  checkCourse = () => {
    this.context.router.push(this.state.FinancialCourse);
  };

  render () {
    const {logs, onlineServiceUrl, shouldShowCourse} = this.state;
    const {user, language} = this.props;
    const help = (
      this.props.language.code.toLowerCase() === 'zh_cn' ? helpCn : (
        this.props.language.code.toLowerCase() === 'en' ? helpEn : helpJa)
    );
    const guide = (
      this.props.language.code.toLowerCase() === 'zh_cn' ? guideCn : (
        this.props.language.code.toLowerCase() === 'en' ? guideEn : guideJa)
    );
    const question = (
      this.props.language.code.toLowerCase() === 'zh_cn' ? questionCn : (
        this.props.language.code.toLowerCase() === 'en' ? questionEn : questionJa)
    );
    let data = [
      {src: help, title: messages('help-center-user.key2')/*帮助文档*/, content: messages('help-center-user.key3')/*员工、财务、管理员的操作手册*/, path: "doc"},
      {src: question, title: messages('help-center-user.key4')/*常见问题*/, content: messages('help-center-user.key5')/*我们每一次努力都是为了更好*/, path: "common-question"},
      // {src: guide, title: messages('help-center-user.key6')/*新手指导*/, content: messages('help-center-user.key7')/*操作演示，三分钟即可上手*/, path: ""},
      {src: guide, title: messages('help-center-user.key6')/*新手指导*/, content: messages('help-center-user.key8')/*敬请期待*/, path: ""},
    ];
    let contract = [
      {src: custom, title: messages('help-center-user.key9')/*在线客服*/, content: messages('help-center-user.key10')/*专人在线为您答疑*/, time: messages('help-center-user.key11')/*工作日*/ ,href: onlineServiceUrl},
      {src: telephone, title: messages('help-center-user.key12')/*电话（中国大陆）*/, content: "400-829-7878", time: messages('help-center-user.key14')/*周一至周日*/, href: null},
      {src: email, title: messages('help-center-user.key15')/*电子邮件*/, content: "service@huilianyi.com", time: "随时为您服务"/*这个"随时为您服务"不要跑多语言，不在页面上显示，代码用的*/, href: null},
    ];
    const backgroundImage = {
      "zh_cn": courseCn,
      "zh_tw": courseTw,
      "en": courseEn,
      "ja": courseJa,
    };
    return (
      <div className={"help-and-feedback-index background-transparent"}>
        <div style={{background: `url(${bg})`, backgroundSize: "cover"}} className={"help-and-feedback-bg helios-page-header"}> {messages('help-center-user.key17')/*Hi~遇到任何问题，都可以在这里找我们解决哦~*/}
        </div>
        <div className={"help-and-feedback-content"}>
          <div className={"help-and-feedback-cards"}>
            {
              data.map((item, index) => {
                return(
                  <div key={index}
                       className={"help-and-feedback-card"}
                       onClick={(e) => {this.goPage(e, item)}}>
                    <Card hoverable
                          style={{ width: 266, height: 280 }}
                          cover={<img alt={messages('setting.key1502')/*加载失败*/} src={item.src}/>}>
                      <Meta title={item.title}
                            description={item.content}/>
                    </Card>
                  </div>
                )
              })
            }
          </div>
          {
            ((!user.enableNewPermission && user.authorities.indexOf("ROLE_COMPANY_FINANCE_ADMIN") !== -1)
              || (user.enableNewPermission && user.hasFinanceRole)) && shouldShowCourse === "true" &&
            <div className="course-area"
                 style={{backgroundImage: `url('${backgroundImage[language.code.toLowerCase()]}')`,
                   backgroundPosition: "center", backgroundSize: "contain"
                 }}>
              <div className="course-area-content">
                <div className="course-area-btn" onClick={this.checkCourse}/>
                <div className="course-area-btn-text" onClick={this.checkCourse}>{messages('help-center-user.key26')/*立即查看*/}</div>
              </div>
            </div>
          }
          {/*<div className={"help-and-feedback-log"}>*/}
            {/*<div className={"update-log-title"}>{messages('help-center-user.key18')更新日志!</div>*/}
            {/*<Divider/>*/}
            {/*{*/}
              {/*logs.length ?*/}
                {/*<Timeline>*/}
                {/*<Timeline.Item>*/}
                  {/*<div className={'log-version'}>{logs[0].version}</div>*/}
                  {/*<div className={'log-date'}>{moment(logs[0].publishDate).format("YYYY-MM-DD")}</div>*/}
                  {/*<div dangerouslySetInnerHTML={{__html: logs[0].content}}/>*/}
                {/*</Timeline.Item>*/}
                  {/*<Timeline.Item>*/}
                    {/*<div className={"log-link"} onClick={this.goUpdateLog}>{messages('help-center-user.key19')查看全部/</div>*/}
                  {/*</Timeline.Item>*/}
                {/*</Timeline>*/}

                {/*: <h4>{messages('help-center-user.key22')当前暂无更新日志!</h4>*/}
            {/*}*/}
          {/*</div>*/}
          <div className={"help-and-feedback-contracts"}>
            <div className={"help-and-feedback-help"}> {messages('help-center-user.key20')/*如需更多帮助请联系我们*/}
            </div>
            {contract.map((item, index) => {
              return(
                <div className={"help-and-feedback-contract"} key={index}>
                  {item.href ?
                    <a className="online-service-btn" href={item.href} target='_blank'>
                      <div><img src={item.src} style={{height: 60, width: 60}}/></div>
                      <div className={"contract-title"}>{item.title}</div>
                      <div className={"contract-content"}>{item.content}</div>
                      <div className={"contract-time"}>{item.time}</div>
                    </a>
                    :
                    <div>
                      <div><img src={item.src} style={{height: 60, width: 60}}/></div>
                      <div className={"contract-title"}>{item.title}</div>
                      <div className={"contract-content"}>{item.content}</div>
                      <div className={"contract-time"} style={item.time === "随时为您服务" ? {visibility: "hidden"} : {}}>{item.time}</div>
                    </div>
                  }
                </div>
              )
            })}
          </div>
        </div>
      </div>
    )
  }
}

HelpAndFeedbackIndex.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language,
    user: state.login.user,
  }
}

export default connect(mapStateToProps)(HelpAndFeedbackIndex);
